<template>
  <div class="a1-container">
    <div class="header">
      <div class="header-left">
        <h1><el-icon><Document /></el-icon> A1用户界面</h1>
        <el-tag type="info" effect="plain" class="version-tag">Version 1.0</el-tag>
      </div>
      <div class="user-info">
        <el-badge :value="historyData.length" class="notification-badge">
          <el-icon><Bell /></el-icon>
        </el-badge>
        <span class="welcome">欢迎，</span>
        <el-avatar :size="32" class="user-avatar">
          <el-icon><User /></el-icon>
        </el-avatar>
        <span class="username">{{ username }}</span>
        <el-tooltip content="退出登录" placement="bottom">
          <button class="logout-btn" @click="handleLogout">
            <el-icon><SwitchButton /></el-icon> 退出登录
          </button>
        </el-tooltip>
      </div>
    </div>
    
    <div class="stats-cards">
      <el-card class="stat-card">
        <template #header>
          <div class="card-header">
            <el-icon><Files /></el-icon>
            <span>已处理文档</span>
          </div>
        </template>
        <div class="stat-value">{{ historyData.length }}</div>
        <el-progress :percentage="(historyData.length / 100) * 100" :show-text="false" />
      </el-card>
      
      <el-card class="stat-card">
        <template #header>
          <div class="card-header">
            <el-icon><Timer /></el-icon>
            <span>今日处理</span>
          </div>
        </template>
        <div class="stat-value">{{ getTodayCount() }}</div>
        <el-progress :percentage="(getTodayCount() / 20) * 100" :show-text="false" status="success" />
      </el-card>
      
      <el-card class="stat-card">
        <template #header>
          <div class="card-header">
            <el-icon><CircleCheckFilled /></el-icon>
            <span>成功率</span>
          </div>
        </template>
        <div class="stat-value">{{ getSuccessRate() }}%</div>
        <el-progress :percentage="getSuccessRate()" :show-text="false" status="warning" />
      </el-card>
    </div>
    
    <div class="upload-section">
      <el-card class="upload-card">
        <template #header>
          <div class="card-header">
            <el-icon><Upload /></el-icon>
            <span>上传PDF文件</span>
          </div>
        </template>
        <div class="upload-content">
          <el-upload
            class="upload-area"
            drag
            action="#"
            :auto-upload="false"
            :on-change="handleFileChange"
            accept=".pdf"
          >
            <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">
                只能上传 PDF 文件
              </div>
            </template>
          </el-upload>
          <div class="upload-actions">
            <el-button 
              type="primary" 
              :loading="loading"
              :disabled="!selectedFile || loading"
              @click="uploadFile"
            >
              <el-icon><UploadFilled /></el-icon> 上传并处理文件
            </el-button>
          </div>
        </div>
      </el-card>
    </div>

    <div class="results-section" v-if="fileData">
      <el-card class="results-card">
        <template #header>
          <div class="card-header">
            <el-icon><Document /></el-icon>
            <span>文件处理结果</span>
            <el-tag size="small" type="success" effect="light" class="status-tag">
              处理完成
            </el-tag>
          </div>
        </template>
        
        <div class="file-data">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="文件ID">
              <el-tag size="small">{{ fileData.id || '-' }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="文件名">
              <el-tag size="small" type="info">{{ fileData.fileName || '-' }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="文件大小">
              <el-tag size="small" type="warning">
                {{ fileData.fileSize ? (fileData.fileSize / 1024).toFixed(2) + ' KB' : '-' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="文件类型">
              <el-tag size="small" type="success">{{ fileData.fileType || '-' }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="上传时间">
              <el-tag size="small" type="info">
                {{ fileData.uploadTime ? new Date(fileData.uploadTime).toLocaleString() : '-' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="处理状态">
              <el-tag size="small" type="success">已完成</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>
    </div>

    <div class="history-button-section">
      <el-button type="primary" @click="showHistoryDrawer = true" class="view-history-btn">
        <el-icon><Clock /></el-icon> 查看历史记录
        <el-badge :value="historyData.length" class="history-badge" />
      </el-button>
    </div>

    <el-drawer
      v-model="showHistoryDrawer"
      title="历史提交记录"
      size="500px"
      :with-header="true"
    >
      <template #header>
        <div class="drawer-header">
          <h2><el-icon><Clock /></el-icon> 历史提交记录</h2>
          <el-input
            v-model="searchQuery"
            placeholder="搜索历史记录"
            prefix-icon="Search"
            clearable
            class="search-input"
          />
        </div>
      </template>
      
      <div class="drawer-body">
        <el-timeline>
          <el-timeline-item
            v-for="item in filteredHistoryData"
            :key="item.id"
            :type="getTimelineItemType(item.status)"
            :timestamp="item.submitTime ? new Date(item.submitTime).toLocaleString() : '-'"
            placement="top"
          >
            <el-card class="history-item">
              <template #header>
                <div class="history-item-header">
                  <span class="file-name">
                    <el-icon><Document /></el-icon> {{ item.fileName || '-' }}
                  </span>
                  <el-tag :type="getStatusTagType(item.status)" effect="light">
                    <el-icon v-if="item.status === 'pending'"><Timer /></el-icon>
                    <el-icon v-else-if="item.status === 'processing'"><Loading /></el-icon>
                    <el-icon v-else-if="item.status === 'completed'"><CircleCheckFilled /></el-icon>
                    <el-icon v-else-if="item.status === 'failed'"><CircleCloseFilled /></el-icon>
                    {{ getStatusText(item.status) }}
                  </el-tag>
                </div>
              </template>
              <div class="history-item-content">
                <div class="history-item-info">
                  <el-descriptions :column="1" size="small">
                    <el-descriptions-item label="提交时间">
                      {{ item.submitTime ? new Date(item.submitTime).toLocaleString() : '-' }}
                    </el-descriptions-item>
                    <el-descriptions-item label="处理结果">
                      {{ item.result || '-' }}
                    </el-descriptions-item>
                  </el-descriptions>
                </div>
                <div class="history-item-actions">
                  <el-button-group>
                    <el-button 
                      type="primary" 
                      size="small"
                      @click="viewDetail(item)"
                    >
                      <el-icon><View /></el-icon> 查看详情
                    </el-button>
                    <el-button 
                      type="danger" 
                      size="small"
                      :disabled="item.status === 'completed'"
                      @click="cancelSubmission(item)"
                    >
                      <el-icon><Delete /></el-icon> 取消审核
                    </el-button>
                  </el-button-group>
                </div>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-drawer>

    <el-dialog
      v-model="showDetailModal"
      title="提交详情"
      width="80%"
      :close-on-click-modal="false"
      class="detail-dialog"
    >
      <template #header>
        <div class="dialog-header">
          <h3><el-icon><Document /></el-icon> 提交详情</h3>
        </div>
      </template>
      
      <div class="dialog-body">
        <el-tabs v-model="activeTab" class="detail-tabs">
          <el-tab-pane label="基本信息" name="basic">
            <el-descriptions :column="2" border>
              <el-descriptions-item label="文件ID">
                {{ selectedDetail?.fileData?.id || '-' }}
              </el-descriptions-item>
              <el-descriptions-item label="文件名">
                {{ selectedDetail?.fileName || '-' }}
              </el-descriptions-item>
              <el-descriptions-item label="专业">
                {{ selectedDetail?.fileData?.major || '-' }}
              </el-descriptions-item>
              <el-descriptions-item label="状态">
                <el-tag :type="getStatusTagType(selectedDetail?.status)">
                  {{ getStatusText(selectedDetail?.status) }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="提交时间">
                {{ selectedDetail?.submitTime ? new Date(selectedDetail.submitTime).toLocaleString() : '-' }}
              </el-descriptions-item>
              <el-descriptions-item label="更新时间">
                {{ selectedDetail?.fileData?.updateTime ? new Date(selectedDetail.fileData.updateTime).toLocaleString() : '-' }}
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="文章信息" name="article">
            <el-descriptions :column="1" border>
              <el-descriptions-item label="文章标题">
                {{ selectedDetail?.fileData?.articleTitle || '-' }}
              </el-descriptions-item>
              <el-descriptions-item label="作者信息">
                {{ selectedDetail?.fileData?.authorInfo || '-' }}
              </el-descriptions-item>
              <el-descriptions-item label="内容摘要">
                <div class="content-block">{{ selectedDetail?.fileData?.contentSummary || '-' }}</div>
              </el-descriptions-item>
              <el-descriptions-item label="研究结论">
                <div class="content-block">{{ selectedDetail?.fileData?.researchConclusion || '-' }}</div>
              </el-descriptions-item>
              <el-descriptions-item label="审核意见">
                <div class="content-block">{{ selectedDetail?.fileData?.reviewComment || '-' }}</div>
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { useRouter } from 'vue-router';
import request from '@/utils/request';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { 
  Document, User, SwitchButton, Files, Upload, UploadFilled, 
  Loading, InfoFilled, Key, Folder, DataLine, Collection, 
  Lock, Timer, Delete, Notebook, Clock, Close, View, 
  CircleCheckFilled, CircleCloseFilled, Warning, Bell, Search
} from '@element-plus/icons-vue';

export default {
  name: 'A1Main',
  components: {
    Document, User, SwitchButton, Files, Upload, UploadFilled, 
    Loading, InfoFilled, Key, Folder, DataLine, Collection, 
    Lock, Timer, Delete, Notebook, Clock, Close, View, 
    CircleCheckFilled, CircleCloseFilled, Warning, Bell, Search
  },
  setup() {
    const router = useRouter();
    return { router };
  },
  data() {
    return {
      username: '',
      selectedFile: null,
      loading: false,
      fileData: null,
      error: null,
      historyData: [], // 历史记录数据
      showDetailModal: false, // 控制详情弹窗显示
      selectedDetail: null, // 选中的详情数据
      showHistoryDrawer: false, // 控制历史记录抽屉显示
      cancelLoading: false, // 取消审核的loading状态
      pollIntervalId: null, // 轮询ID
      searchQuery: '',
      activeTab: 'basic',
      stats: {
        all: 0,
        pass: 0
      }
    };
  },
  computed: {
    filteredHistoryData() {
      if (!this.searchQuery) return this.historyData;
      const query = this.searchQuery.toLowerCase();
      return this.historyData.filter(item => 
        item.fileName?.toLowerCase().includes(query) ||
        item.status?.toLowerCase().includes(query)
      );
    }
  },
  mounted() {
    // 从localStorage获取用户名
    this.username = localStorage.getItem('username') || '用户';
    this.fetchHistoryData(); // 获取历史数据
    this.fetchStats(); // 获取统计数据
  },
  methods: {
    selectFile(event) {
      this.selectedFile = event.target.files[0];
    },
    async uploadFile() {
      if (!this.selectedFile) {
        return;
      }

      this.loading = true;
      this.error = null;
      
      try {
        const formData = new FormData();
        formData.append('file', this.selectedFile);
        
        // 文件上传的接口
        const response = await request({
          method: 'post',
          url: 'http://localhost:8080/api/file/upload',
          data: formData,
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        });
        
        if (response.data && response.data.code === 200) {
          const confId = response.data.data.id;
          // 开始轮询状态
          this.startPolling(confId);
          
          // 重置文件选择
          this.selectedFile = null;
          
          // 刷新历史记录和统计数据
          await Promise.all([
            this.fetchHistoryData(),
            this.fetchStats()
          ]);
        } else {
          throw new Error(response.data?.msg || '请求失败');
        }
      } catch (error) {
        console.error('文件处理失败:', error);
        this.error = '文件处理失败，请重试';
        ElMessage.error('文件处理失败，请重试');
      } finally {
        this.loading = false;
      }
    },
    // 开始轮询状态
    startPolling(confId) {
      const pollInterval = setInterval(async () => {
        try {
          const response = await request({
            method: 'get',
            url: `http://10.137.10.169:8080/api/file/info/conf/${confId}`
          });
          console.log("轮询了一次");
          if (response.data && response.data.code === 200) {
            const status = response.data.data.status;
            
            if (status === 8) {
              clearInterval(pollInterval);
              ElMessage.error('文件处理失败');
            } else if (status === 0) {
              clearInterval(pollInterval);
              ElMessage.success('大模型处理成功');
            }
          }
        } catch (error) {
          console.error('轮询状态失败:', error);
          clearInterval(pollInterval);
        }
      }, 3000); // 每3秒轮询一次

      // 存储interval ID，以便在组件销毁时清除
      this.pollIntervalId = pollInterval;
    },
    // 组件销毁时清除轮询
    beforeDestroy() {
      if (this.pollIntervalId) {
        clearInterval(this.pollIntervalId);
      }
    },
    handleLogout() {
      // 清除登录状态
      localStorage.removeItem('isLoggedIn');
      localStorage.removeItem('username');
      localStorage.removeItem('userRole');
      localStorage.removeItem('token'); // 同时清除token
      
      // 跳转到登录页
      this.router.push('/login');
    },
    // 获取历史数据
    async fetchHistoryData() {
      try {
        const response = await request({
          method: 'get',
          url: '/api/me/submitted'
        });

        if (response.data && response.data.code === 200) {
          // 将file-view数据转换为历史记录格式，并获取文件详细信息
          const historyPromises = response.data['file-view'].map(async (item) => {
            try {
              // 获取文件详细信息
              const fileDetailResponse = await request({
                method: 'get',
                url: `http://localhost:8080/api/file/info/${item.fileId}`
              });

              const fileName = fileDetailResponse.data.code === 200 
                ? fileDetailResponse.data.data.fileName 
                : `文件${item.fileId}`;

              return {
                id: item.id,
                fileName: fileName,
                submitTime: item.createTime,
                status: this.getStatusFromCode(item.status),
                fileData: {
                  id: item.fileId,
                  major: item.major,
                  status: item.status,
                  articleTitle: item.articleTitle,
                  authorInfo: item.authorInfo,
                  contentSummary: item.contentSummary,
                  researchConclusion: item.researchConclusion,
                  reviewComment: item.reviewComment,
                  createTime: item.createTime,
                  updateTime: item.updateTime
                }
              };
            } catch (error) {
              console.error(`获取文件${item.fileId}详情失败:`, error);
              return {
                id: item.id,
                fileName: `文件${item.fileId}`,
                submitTime: item.createTime,
                status: this.getStatusFromCode(item.status),
                fileData: {
                  id: item.fileId,
                  major: item.major,
                  status: item.status,
                  articleTitle: item.articleTitle,
                  authorInfo: item.authorInfo,
                  contentSummary: item.contentSummary,
                  researchConclusion: item.researchConclusion,
                  reviewComment: item.reviewComment,
                  createTime: item.createTime,
                  updateTime: item.updateTime
                }
              };
            }
          });

          // 等待所有文件详情获取完成
          this.historyData = await Promise.all(historyPromises);
        } else {
          throw new Error(response.data?.msg || '获取历史记录失败');
        }
      } catch (error) {
        console.error('获取历史记录失败:', error);
        ElMessage.error('获取历史记录失败');
      }
    },
    // 根据状态码获取状态文本
    getStatusFromCode(code) {
      const statusMap = {
        0: 'pending',    // 初始化
        1: 'failed',     // 文件审核失败
        2: 'pending',    // 文件审核成功,等待标记
        3: 'pending',    // 完成标签标记,等待计算机老师审核
        5: 'pending',    // 等待专业老师审核
        7: 'completed',  // 完成全部审核
        8: 'failed',     // 大模型初始化失败
        9: 'pending'     // 等待大模型初始化文件
      };
      return statusMap[code] || 'unknown';
    },
    // 查看详情
    async viewDetail(item) {
      this.selectedDetail = item;
      this.showDetailModal = true;
      
      // 如果没有完整的文件数据，尝试从后端获取
      if (!item.fileData && item.id) {
        try {
          const response = await request({
            method: 'get',
            url: `/api/file/detail/${item.id}`
          });
          
          if (response.data && response.data.code === 200) {
            // 将获取的文件数据添加到选中项中
            this.selectedDetail.fileData = response.data.data;
          }
        } catch (error) {
          console.error('获取文件详情失败:', error);
          ElMessage.error('获取文件详情失败');
        }
      }
    },
    // 格式化字段名称
    formatFieldName(key) {
      const fieldMap = {
        'id': '文件ID',
        'fileName': '文件名',
        'filePath': '文件路径',
        'fileSize': '文件大小',
        'fileType': '文件类型',
        'type': '类型',
        'fileHash': '文件哈希',
        'uploadTime': '上传时间',
        'uploadUserId': '上传用户ID',
        'isDeleted': '是否删除',
        'deleteTime': '删除时间',
        'description': '描述'
      };
      return fieldMap[key] || key;
    },
    
    // 格式化字段值
    formatFieldValue(key, value) {
      if (value === null || value === undefined) return '-';
      
      if (key === 'fileSize') {
        return (value / 1024).toFixed(2) + ' KB';
      } else if (key === 'uploadTime' || key === 'deleteTime') {
        return value ? new Date(value).toLocaleString() : '-';
      } else if (key === 'isDeleted') {
        return value === 0 ? '否' : '是';
      }
      return value;
    },
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        'pending': '待处理',
        'processing': '处理中',
        'completed': '已完成',
        'failed': '处理失败'
      };
      return statusMap[status] || '未知状态';
    },
    // 取消审核
    async cancelSubmission(item) {
      if (!confirm('确定要取消该审核吗？')) {
        return;
      }

      this.cancelLoading = true;
      try {
        const response = await request({
          method: 'post',
          url: `http://localhost:8080/api/cancel/${item.id}`
        });
        
        if (response.data && response.data.code === 200) {
          ElMessage.success('取消成功');
          await this.fetchHistoryData(); // 重新获取历史数据
        } else {
          throw new Error(response.data?.msg || '取消失败');
        }
      } catch (error) {
        console.error('取消审核失败:', error);
        ElMessage.error('取消审核失败，请重试');
      } finally {
        this.cancelLoading = false;
      }
    },
    getTodayCount() {
      return this.stats.all;
    },
    getSuccessRate() {
      return this.stats.all ? Math.round((this.stats.pass / this.stats.all) * 100) : 0;
    },
    getTimelineItemType(status) {
      const typeMap = {
        'pending': 'warning',
        'processing': 'primary',
        'completed': 'success',
        'failed': 'danger'
      };
      return typeMap[status] || 'info';
    },
    getStatusTagType(status) {
      const typeMap = {
        'pending': 'warning',
        'processing': 'primary',
        'completed': 'success',
        'failed': 'danger'
      };
      return typeMap[status] || 'info';
    },
    handleFileChange(file) {
      this.selectedFile = file.raw;
    },
    // 获取统计数据
    async fetchStats() {
      try {
        const response = await request({
          method: 'get',
          url: 'http://localhost:8080/api/Static'
        });
        
        if (response.data && response.data.code === 200) {
          this.stats = response.data.qaCount;
        }
      } catch (error) {
        console.error('获取统计数据失败:', error);
        ElMessage.error('获取统计数据失败');
      }
    },
  }
};
</script>

<style>
/* 全局样式覆盖 */
.main-content, .app-container {
  max-width: none !important;
  width: 100% !important;
}

.file-data, .content, table {
  max-width: none !important;
  width: 100% !important;
}

/* 添加到A1Main.vue中的全局样式 */
html, body {
  overflow-x: hidden;
  min-width: 1200px; /* 设置一个最小宽度 */
}

/* 固定布局样式 */
.app-container, .main-content {
  width: 100% !important;
  min-width: 1200px !important; /* 固定最小宽度 */
  position: relative;
}

/* 确保所有容器都遵循相同的固定宽度规则 */
.a1-container, .a2-container, .a3-container, 
.file-data, .content, .upload-section, .results-section {
  min-width: 1200px !important;
}

/* 防止表格被挤压 */
table {
  table-layout: fixed; /* 固定表格布局 */
  min-width: 1000px !important;
}
</style>

<style scoped>
/* 组件范围样式 */
.a1-container {
  width: 100%;
  min-width: 1200px;
  padding: 30px;
  box-sizing: border-box;
  position: relative;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.header h1 {
  color: #2c3e50;
  font-size: 24px;
  margin: 0;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.welcome {
  font-size: 16px;
  color: #606266;
}

.username {
  font-size: 16px;
  font-weight: 600;
  color: #409EFF;
  margin: 0 10px;
}

.logout-btn {
  background-color: #f56c6c;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.logout-btn:hover {
  background-color: #e64242;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(245, 108, 108, 0.3);
}

.processed-count-text {
  font-size: 15px;
  color: #606266;
  margin: 20px 0;
  padding: 10px 20px;
  background: white;
  border-radius: 8px;
  display: inline-block;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.upload-section {
  margin-bottom: 30px;
  padding: 25px;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  background-color: white;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.upload-section:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.upload-section h2 {
  color: #2c3e50;
  margin-bottom: 20px;
  font-size: 20px;
}

button {
  margin-left: 10px;
  padding: 10px 20px;
  background-color: #409EFF;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

button:hover {
  background-color: #66b1ff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

button:disabled {
  background-color: #a0cfff;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.loading-indicator {
  margin-top: 15px;
  color: #409EFF;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.results-section {
  padding: 25px;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  background-color: white;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  margin-bottom: 30px;
}

.results-section h2 {
  color: #2c3e50;
  margin-bottom: 20px;
  font-size: 20px;
}

/* 表格样式优化 */
.file-data {
  overflow-x: auto;
  margin: 20px 0;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

table th,
table td {
  padding: 15px 20px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
}

table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
}

table th:first-child,
table td:first-child {
  width: 20%;
  min-width: 150px;
  font-weight: 600;
}

table th:last-child,
table td:last-child {
  width: 80%;
}

table tr:hover {
  background-color: #f5f7fa;
}

/* 历史按钮样式 */
.history-button-section {
  margin-top: 20px;
  text-align: right;
}

.view-history-btn {
  background-color: #909399;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.view-history-btn:hover {
  background-color: #a6a9ad;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(144, 147, 153, 0.3);
}

/* 抽屉样式 */
.drawer-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
}

.drawer-mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 500px;
  background-color: white;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.drawer-header {
  padding: 20px;
  border-bottom: 1px solid #eaeaea;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f5f7fa;
}

.drawer-header h2 {
  color: #2c3e50;
  margin: 0;
  font-size: 20px;
}

.drawer-body {
  padding: 20px;
  height: calc(100% - 71px);
  overflow-y: auto;
}

/* 历史记录项样式 */
.history-item {
  border: 1px solid #eaeaea;
  border-radius: 8px;
  margin-bottom: 15px;
  transition: all 0.3s ease;
  background-color: white;
}

.history-item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.history-item-content {
  padding: 20px;
}

.history-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.file-name {
  font-weight: 600;
  font-size: 16px;
  color: #2c3e50;
}

.status-tag {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
}

.status-tag.pending {
  background-color: #e6a23c;
  color: white;
}

.status-tag.processing {
  background-color: #409EFF;
  color: white;
}

.status-tag.completed {
  background-color: #67c23a;
  color: white;
}

.status-tag.failed {
  background-color: #f56c6c;
  color: white;
}

.history-item-info {
  color: #909399;
  font-size: 14px;
  margin-bottom: 12px;
}

.history-item-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.detail-btn {
  background-color: #409EFF;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.detail-btn:hover {
  background-color: #66b1ff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

.delete-btn {
  background-color: #F56C6C;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.delete-btn:hover {
  background-color: #f78989;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(245, 108, 108, 0.3);
}

.delete-btn:disabled {
  background-color: #fab6b6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 详情弹窗样式 */
.detail-dialog {
  max-width: 90vw;
}

.dialog-body {
  max-height: 70vh;
  overflow-y: auto;
  padding: 20px;
}

.content-block {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.6;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 4px;
  margin: 5px 0;
}

.el-descriptions {
  margin-bottom: 20px;
}

.el-descriptions__label {
  width: 120px;
  font-weight: bold;
}

.el-descriptions__content {
  padding: 12px 15px;
}

.detail-tabs {
  margin-top: 20px;
}

.el-tab-pane {
  padding: 20px 0;
}

/* 新增样式 */
.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.version-tag {
  font-size: 12px;
}

.notification-badge {
  margin-right: 16px;
}

.user-avatar {
  background-color: #409EFF;
  color: white;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
  margin: 10px 0;
}

.upload-card {
  margin-bottom: 30px;
}

.upload-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.upload-area {
  width: 100%;
}

.upload-actions {
  display: flex;
  justify-content: center;
}

.results-card {
  margin-bottom: 30px;
}

.search-input {
  margin-bottom: 20px;
}

.history-badge {
  margin-left: 8px;
}

.dialog-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dialog-header h3 {
  margin: 0;
  font-size: 18px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .stats-cards {
    grid-template-columns: 1fr;
  }
  
  .header {
    flex-direction: column;
    gap: 16px;
  }
  
  .user-info {
    width: 100%;
    justify-content: center;
  }
}

/* 动画效果 */
.el-card {
  transition: all 0.3s ease;
}

.el-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.el-button {
  transition: all 0.3s ease;
}

.el-button:hover {
  transform: translateY(-1px);
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 加载动画 */
.loading-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 状态标签样式 */
.status-tag {
  margin-left: 8px;
}

/* 时间线样式 */
.el-timeline-item__node {
  background-color: #409EFF;
}

.el-timeline-item__tail {
  border-left: 2px solid #e4e7ed;
}

/* 描述列表样式 */
.el-descriptions {
  margin: 16px 0;
}

.el-descriptions__label {
  font-weight: 600;
}

/* 标签样式 */
.el-tag {
  margin-right: 8px;
}

/* 按钮组样式 */
.el-button-group {
  display: flex;
  gap: 8px;
}

/* 抽屉样式优化 */
.el-drawer__header {
  margin-bottom: 0;
  padding: 16px 20px;
  border-bottom: 1px solid #e4e7ed;
}

.el-drawer__body {
  padding: 20px;
}

/* 对话框样式优化 */
.el-dialog__header {
  margin: 0;
  padding: 16px 20px;
  border-bottom: 1px solid #e4e7ed;
}

.el-dialog__body {
  padding: 20px;
}

/* 上传区域样式 */
.el-upload-dragger {
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fafafa;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.el-upload-dragger:hover {
  border-color: #409EFF;
  background-color: #f5f7fa;
}

.el-upload__tip {
  margin-top: 8px;
  color: #909399;
  font-size: 12px;
}

/* 进度条样式 */
.el-progress-bar__outer {
  border-radius: 4px;
}

.el-progress-bar__inner {
  border-radius: 4px;
  transition: width 0.6s ease;
}

/* 时间线项目样式 */
.el-timeline-item__content {
  margin-left: 16px;
}

.el-timeline-item__timestamp {
  color: #909399;
  font-size: 12px;
}

/* 卡片内容样式 */
.el-card__body {
  padding: 20px;
}

/* 标签页样式 */
.el-tabs__nav-wrap::after {
  height: 1px;
  background-color: #e4e7ed;
}

.el-tabs__item {
  transition: all 0.3s ease;
}

.el-tabs__item.is-active {
  color: #409EFF;
  font-weight: 600;
}

/* 输入框样式 */
.el-input__inner {
  border-radius: 4px;
  transition: all 0.3s ease;
}

.el-input__inner:focus {
  border-color: #409EFF;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

/* 徽章样式 */
.el-badge__content {
  background-color: #409EFF;
  border: none;
}

/* 头像样式 */
.el-avatar {
  background-color: #409EFF;
  color: white;
  font-size: 16px;
}

/* 按钮样式增强 */
.el-button {
  border-radius: 4px;
  font-weight: 500;
}

.el-button--primary {
  background-color: #409EFF;
  border-color: #409EFF;
}

.el-button--primary:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.el-button--danger {
  background-color: #f56c6c;
  border-color: #f56c6c;
}

.el-button--danger:hover {
  background-color: #f78989;
  border-color: #f78989;
}

/* 表格样式增强 */
.el-table {
  border-radius: 4px;
  overflow: hidden;
}

.el-table th {
  background-color: #f5f7fa;
  font-weight: 600;
}

.el-table td {
  padding: 12px 0;
}

/* 抽屉内容样式 */
.drawer-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.drawer-header {
  padding: 16px;
  border-bottom: 1px solid #e4e7ed;
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* 历史记录项样式增强 */
.history-item {
  margin-bottom: 16px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.history-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.history-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.history-item-content {
  padding: 12px;
}

.history-item-info {
  margin-bottom: 12px;
}

.history-item-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* 响应式布局增强 */
@media (max-width: 1200px) {
  .stats-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .stats-cards {
    grid-template-columns: 1fr;
  }
  
  .el-descriptions {
    column-count: 1;
  }
  
  .history-item-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .history-item-actions {
    flex-direction: column;
  }
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
  .el-card {
    background-color: #1a1a1a;
    border-color: #333;
  }
  
  .el-drawer {
    background-color: #1a1a1a;
  }
  
  .el-dialog {
    background-color: #1a1a1a;
  }
  
  .el-table {
    background-color: #1a1a1a;
    color: #fff;
  }
  
  .el-table th {
    background-color: #2c2c2c;
  }
  
  .el-table td {
    border-bottom-color: #333;
  }
}
</style>
